<template>
	<view>
		<view v-if="prompt" class="prompt animation-slide-top">点哪里就回复哪里哦~</view>
		<view class="talk">
		    <view class="talk-header">
		        <view class="header-l avater">
		            <image class="" :src="talk.userAvatar==null?'../../static/images/header.jpg':talk.userAvatar" mode="widthFix" :lazy-load="false"/>
		        </view>
		        <view class="header-m">
		            <view class="nick-name">
		                {{talk.isAnonymity==true?'匿名用户':talk.nikeName}}
		                <text v-if="talk.authentication" class="iconfont iconrenzheng3 text-green "></text>
		                <text v-if="talk.role=='管理员'" class="iconfont iconrenzheng3 text-green "></text>
		                <text v-if="talk.role=='开发者'" class="iconfont iconrenzheng3 text-green "></text>
		                <text v-if="talk.role=='客服'" class="iconfont iconrenzheng3 text-green " ></text>
		                <text v-if="talk.role=='板块管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                <text v-if="talk.role=='失物招领管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                <text v-if="talk.role=='跳蚤市场管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                <text v-if="talk.role=='说说管理员'" class="iconfont iconrenzheng3 text-green "></text>
		                <text v-if="talk.role=='账号管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		            </view>
		            <view class="time">{{ talk.createTime }}</view>
		        </view>
		        <view class="header-r">
		            <text :class="talk.typeId==1?'iconfont iconmoren text-theme-color':talk.typeId==2?'iconfont iconqiuzhu1 text-green':talk.typeId==3?'iconfont iconershou1 ':'iconfont'" ></text>
		        </view>
		    </view>
		    <view class="item-price">
		        ￥<text class="item-price-num">{{talk.price}}</text>
		        <van-tag class="item-price-tag" type="warning">{{ talk.remarke }}</van-tag>
		    </view>
		
		    <view class="talk-content">{{talk.content}}</view>
		    
		    <van-divider />
		
		    <view class="item-info">
		        <view class="item-info-article">
		            <u-tag type="primary" text="物品名称" class="info-tag" shape="circleRight" mode="dark"/> {{ talk.article }}
		        </view>
		        <view class="item-info-contact">
		            <van-tag mark class="info-tag" color="#ffe1e1" text-color="#ad0000">
		                <text v-if="talk.contactType==1">手机</text>
		                <text v-if="talk.contactType==3">微信</text>
		                <text v-if="talk.contactType==2">QQ</text>
		            </van-tag><text>{{ talk.contact }} </text>
		        </view>
		    </view>
		
		    <van-divider />
		
		    <view class="talk-main" @tap="chooseReplyTalk">
		        
		        
		        <view class="talk-imgs">
		            <view v-for="(imgItem,imgIndex) in talk.imgUrlList" :key="imgIndex" v-if="talk.imgNum==1" class="talk-img1">
		                <image class="" :src="imgItem" mode="widthFix" :lazy-load="false" @tap="handlePrevewImage" :data-url="imgItem"></image>
		            </view>
		            <view v-for="(imgItem,imgIndex) in talk.imgUrlList" :key="imgIndex" v-if="talk.imgNum>=2&&talk.imgNum<=4" class="talk-img2">
		                <image class="" :src="imgItem" mode="aspectFill" :lazy-load="false" @tap="handlePrevewImage" :data-url="imgItem"></image>
		            </view>
		            <view v-for="(imgItem,imgIndex) in talk.imgUrlList" :key="imgIndex" v-if="talk.imgNum>4&&talk.imgNum<=9" class="talk-img3">
		                <image class="" :src="imgItem" mode="aspectFill" :lazy-load="false" @tap="handlePrevewImage" :data-url="imgItem"></image>
		            </view>
		        </view>
		    </view>
		    <view class="talk-dis">
		        <van-tabs line-height='3px' color="#84adfb">
		            <!-- <van-tab title="喜欢{{talk.likeNum}}">喜欢</van-tab> -->
		            <van-tab :title="'评论('+totalCount+')'">
		                <!-- 评论内容 -->
		                <view class="discuss">
							<view v-if="!totalCount">暂无评论...</view>
		                    <view v-for="(item,index) in talkDis" :key="index" @tap="chooseReplyDis" :data-discussindex="index" :data-discussid="item.id" class="dis-item">
		                        <view class="dis-message">
		                            <view class="dis-avatar">
		                                <image class="" :src="item.userAvatar==null?'../../static/images/header.jpg':item.userAvatar" mode="aspectFit|aspectFill|widthFix" :lazy-load="false"></image>
		                            </view>
		                            <view class="dis-msg-text">
		                                <view class="dis-nickname">
		                                    {{item.nickName}}
		                                    <text v-if="item.authentication" class="iconfont iconrenzheng3 text-green "></text>
		                                    <text v-if="item.role=='管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                                    <text v-if="item.role=='开发者'" class="iconfont iconrenzheng3 text-green " ></text>
		                                    <text v-if="item.role=='客服'" class="iconfont iconrenzheng3 text-green " ></text>
		                                    <text v-if="item.role=='板块管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                                    <text v-if="item.role=='失物招领管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                                    <text v-if="item.role=='跳蚤市场管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                                    <text v-if="item.role=='说说管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                                    <text v-if="item.role=='账号管理员'" class="iconfont iconrenzheng3 text-green " ></text>
		                                </view>
		                                <view class="dis-time">{{item.createTime}}</view>
		                            </view>
		                        </view>
		                        <view class="dis-main">
		                            <view class="null"></view>
		                            <view class="dis-main-content">
		                                <view v-if="item.imgUrl" class="dis-image" @tap="LookPic" :data-img="item.imgUrl">
		                                    <image class="" :src="item.imgUrl" mode="widthFix"></image>
		                                </view>
		                                <view class="dis-content">{{item.content}}</view>
		                                <view v-if="item.fleaMarketRes!=''" class="dis-reply">
		                                    <view v-for="(replyitem,replyindex) in item.fleaMarketRes" :key="replyindex" class="reply-main">
		                                        <view class="null-reply"></view>
		                                        <view class="reply-main-item">
		                                            <view class="reply-nickname">
		                                                {{replyitem.nickName}}:
		                                            </view>
		                                            <view class="reply-content">
		                                                {{replyitem.content}}
		                                                <text v-if="replyitem.imgUrl" class="reply-image-click text-green" @tap="LookPic" :data-img="replyitem.imgUrl">
		                                                    [查看图片]
		                                                </text>
		                                            </view>
		                                        </view>
		                                    </view>
		                                </view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
					</van-tab>
					<van-tab ></van-tab>
		            <van-tab></van-tab>
		            <van-tab></van-tab>
		        </van-tabs>
		    </view>
			<view class="isOver" v-if="!totalCount?false:isover">暂无更多</view>
		    <view class="dis-input">
		        <view class="cu-bar input my-bottom-input">
		            <view class="cu-avatar" :style="'background-image:url('+disImgList[0]==null?'../../static/images/header.jpg':disImgList[0]+');'"></view>
		            <view @tap="disChangeImg" class="action">
		                <text class="cuIcon-roundaddfill text-grey"></text>
		            </view>
		            <input v-model="disContent" class="solid-bottom" maxlength="300" :placeholder="'对' +forUser + '说点什么吧~'" cursor-spacing="10" />
		            <view @tap="switchForUser" class="action">
		                <text :class="sandObj==1?'iconfont iconwomendegushi text-green animation-slide-bottom':'iconfont iconwomendegushi animation-slide-top text-green'"></text>
		            </view>
		            <button v-if="sandObj==1" @tap="sendDiscuss" class="animation-shake cu-btn bg-green shadow-blur">
		                发送
		            </button>
		            <button v-if="sandObj==2" @tap="sendReply" class="animation-shake cu-btn bg-cyan  shadow-blur">
		                发送
		            </button>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import { getLimitFleaMarketDisByFleaMarketIdUsingGET,
	  newFleamarketDisUsingPOST,
	  newDiscussUsingPOST_1
	 } from "../../../../common/api/fleamarket.js"
	const utils = require("../../../../utils/util.js")
	const user = require("../../../../common/api/user.js")
	const upUtils = require("../../../../utils/upyunUtil.js")
	
	export default {
		data() {
			return {
				token: "",
				totalCount:0,
				orUser: "",
				prompt: true,// 提示信息
				chooseDiscuss: "",// 当前选中的discuss
				// 发送对象 1 是楼主 2 是楼层(评论者) 3 楼层屋(回复评论者)
				sandObj: 1,
				talk: {},
				talkDis: [],
				disImgList: [],// 评论的附带图片
				disContent: "",
				discussindex: 0, // 楼层索引 默认第1楼
				No_data: false,
				forUser:'',
				QueryParams:{
				    page:1,
				    size:10
				},
				replyId:'',
				isover:false
			}
		},
		onLoad(options) {
			this.isover = false
			var talk = JSON.parse(decodeURIComponent(options.talk))
			this.talk = talk
			this.forUser = talk.nikeName
			// 检查登录状态
			utils.loginStatus();
			var token = uni.getStorageSync("token");
			console.log(token)
			this.token = token
			user.loginStatusUsingGET(token)
			this.get_comment();
		},
		onShow() {
			 // 关闭提示框
			 this.closePrompt();
		},
		methods: {
			// 图片预览点击事件
			handlePrevewImage(e){
			    // console.log("图片点击事件")
			    // map函数构造一个新的数组， urls的是一个数组，遍历里面放要显示的图片, current表示点进去显示那一张图片，需要从页面传过来
			    // 获取点击页面传过来的图片
			    const current = e.currentTarget.dataset.url;
			    let str_index = e.currentTarget.dataset.index;
			    let urls = this.talk.imgUrlList;
			    uni.previewImage({
			      current:current,
			      urls: urls,
			    })
			},
			// 获取评论
			get_comment(){
			    let data = {
			      fleaMarketId: this.talk.id,
			      page:this.QueryParams.page,
			      size:this.QueryParams.size
			    }
			    let disParams = utils.generateParams(data)
			    
			    getLimitFleaMarketDisByFleaMarketIdUsingGET(disParams,this.token).then(res =>{
			
					// 没有数据
					let { data } = res.data || [];
			
					console.log("aaaa")
					console.log(data)
					console.log("aaaa")
					if(data.length == 0){
						console.log("没有数据了")
						this.No_data = true
						return
					}
					this.talkDis = [...this.talkDis,...data]
					this.totalCount = this.talkDis.length
			    }).catch(err =>{
			        this.No_data = false
			    })
			},
			// 选择评论的图片
			disChangeImg() {
			    console.log("****************")
			    uni.chooseImage({
			      count: 1, //默认9
			      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			      sourceType: ['album'], //从相册选择
			      success: (res) => {
			        if (this.disImgList.length != 0) {
			            this.disImgList = res.tempFilePaths
			        } else {
			            this.disImgList = res.tempFilePaths
			        }
			      }
			    });
			},
			// 发布评论  回复楼主
			sendDiscuss() {
			    if(this.LockToast() == -1) return
			    if(!this.disContent){
			      uni.showToast({
			        title: "来说点什么吧！",
			        icon:"none",
			        duration: 1000,
			        mask:true
			      })
			        return
			    }
			    var sandDto = {
			
			      content: "",
			      fleamarketId:'',
			      imgUrl: ""
			
			    }
			    sandDto.fleamarketId = this.talk.id;
			    sandDto.content = this.disContent;
			
			    var disImgUrl = upUtils.upYunImgGetImgUrl(this.disImgList, this.token)
			    sandDto.imgUrl = disImgUrl[0];
			    newFleamarketDisUsingPOST(sandDto, this.token)
			      .then(res => {
			        
			        if (res.data.code == 200) {
			          let uuid = res.data.data
			          this.Set_sendDiscuss(sandDto,uuid)
			        }
			        // 通知
			
			        uni.showToast({
			          title: res.data.message,
			          icon: 'succes',
			          duration: 1000,
			          mask:true
			        })
			      })
			},
			// 静态添加给楼主
			Set_sendDiscuss(sandDto, uuid){
			      console.log(sandDto)
			      // 拿到本地的用户信息
			      let user_info = uni.getStorageSync('userInfo')
			      console.log(user_info)
			      let data = {
			        id:user_info.id,	
			        disId:uuid,
			        // replyId	:sandDto.replyId,	
			        userAvatar:user_info.userAvatar,	
			        nickName:user_info.nickname,	
			        role:'',	
			        authentication:user_info.authentication,	
			        replys:[],	
			        forUsername	:user_info.nickname,	
			        forUserId:sandDto.forUserId,	
			        imgUrl:this.disImgList[0],	
			        content	:sandDto.content,	
			        isLock:false,	
			        isDelete:false,	
			        createTime: this.get_time(),	
			        remark:	'',
			        fleaMarketRes:[]
			
			      }
			
			      let talkDis = this.talkDis || []
			      console.log(talkDis)
			      this.talkDis.push(data)
			      // this.setData({
			      //   talkDis
			      // })
			      this.totalCount = this.talkDis.length
			      // 清空输入框
			        this.disContent = ''
			        this.disImgList =  []
			},
			// 回复层主
			sendReply() {
			    if(this.LockToast() == -1) return
			    if(!this.disContent){
			      uni.showToast({
			        title: "来说点什么吧！",
			        icon:"none",
			        duration: 1000,
			        mask:true
			      })
				  this.disContent = ''
			    return
			  }
			    let sandDto = {
			      content: "",
			      rdisId: this.talkDis[this.discussindex].disId,
			      imgUrl: ""
			    }
			
			    sandDto.content = this.disContent;
			
			    var repImgUrl = upUtils.upYunImgGetImgUrl(this.disImgList, this.token)
			    sandDto.imgUrl = repImgUrl[0];
			    newDiscussUsingPOST_1(sandDto, this.token)
			      .then(res => {
			        if (res.data.code == 200) {
			          console.log(res)
			          
			        }
			        this.Set_sendReply(sandDto)
			        // 通知
			
			        uni.showToast({
			          title: res.data.message,
			          icon: 'succes',
			          duration: 1000,
			          mask:true
			        })
			
			        // 回复完 层主切换回复楼主
			        this.switchForUser()
			
			      })
			 
			},
			// 静态添加给层主
			Set_sendReply(sandDto){
			    let user_info = uni.getStorageSync('userInfo')
			    console.log("1213")
			    console.log(sandDto)
			    let data = {
			      content: sandDto.content,
			      nickName: user_info.nickname,
			      imgUrl: sandDto.imgUrl
			    }
			    console.log(this.discussindex)
			    let talkDis = this.talkDis || []
			    talkDis[this.discussindex].fleaMarketRes.push(data)
			    this.talkDis = talkDis
				this.totalCount = this.talkDis.length
			    // 清空输入框
			    this.disContent = '',
			    this.disImgList = []
			},
			// 选择回复评论对象
			chooseReplyDis(e) {
			    console.log(e.currentTarget.dataset.discussid)
			    let replyId = e.currentTarget.dataset.discussid;
			    let discussindex = e.currentTarget.dataset.discussindex; // 楼层索引
			    let chooseDiscuss = this.talkDis[discussindex];
			    console.log("333")
			    console.log(replyId)
			    console.log("333")
			      this.forUser = chooseDiscuss.nickName
			      this.sandObj = 2
			      this.chooseDiscuss =chooseDiscuss
			      this.discussindex =discussindex
			      this.replyId = replyId
			
			},
			chooseReplyTalk() {
			      this.forUser = this.talk.nikeName,
			      this.sandObj = 1
			},
			// 切换用户回复对象
			switchForUser() {
				let sandObj = this.sandObj == 1 ? 2 : 1;
			
			      this.sandObj = sandObj
				  // this.sandObj = 1
			      this.forUser = this.talk.nikeName
			    // 清空输入框
			      this.disContent = '',
			      this.disImgList = []
			},
			// 提示动画
			closePrompt() {
				setTimeout(() => {
					this.prompt = false
				},4500)
			},
			// 图片预览点击事件
			handlePrevewImage(e){
			    // console.log("图片点击事件")
			    // map函数构造一个新的数组， urls的是一个数组，遍历里面放要显示的图片, current表示点进去显示那一张图片，需要从页面传过来
			    // 获取点击页面传过来的图片
			    const current = e.currentTarget.dataset.url;
			    let str_index = e.currentTarget.dataset.index;
			    let urls = this.talk.imgUrlList;
			    uni.previewImage({
			      current:current,
			      urls: urls,
			    })
			},
			get_time(){
			    let myDate = new Date(); 
			    let year = myDate.getFullYear();
			    let month = myDate.getMonth() + 1;
			    let hours = myDate.getHours(); 
			    let date = myDate.getDate();
			    let minutes = myDate.getMinutes(); 
			    let seconds = myDate.getSeconds();
			    let str = year + "-" + month + "-" + date +" " + hours + ":" + minutes + ":" + seconds
			    console.log(str)
			    return str
			},
			LookPic(e){
			    let image = e.currentTarget.dataset.img;
			    console.log(image)
			    uni.previewImage({
			      current:image,
			      urls: [image],
			    })
			},
			LockToast(){
			    if(this.talk.isLock){
			      uni.showToast({
			        title: "帖子已经锁定不允许评论(:",
			        icon:"none",
			        duration: 1000,
			        mask:true
			      })
			      return -1
			    }
			    return 1
			    
			}
			
		},
		// 页面上滑 滚动条触底事件 获取评论
		onReachBottom() {
			this.isover = true
			// if(this.No_data){
			//       uni.showToast({
			//         title: "已经到底了(:",
			//         icon: 'succes',
			//         duration: 1000,
			//         mask:true
			//       })
			//       return
			//     }
			
			    this.QueryParams.page++;
			    this.get_comment()
		}
	}
</script>

<style>
page {
  background-color: #f1f1f1;
  height: 100%;
  width: 100%;
}
.isOver{
	position: absolute;
	bottom: 100rpx;
	width: 100%;
	text-align: center;
	color: #C0C0C0;
	font-size: 25rpx;	
	padding: 10rpx 0;
	z-index: 999;
}
.prompt {
  position: fixed;
  left: 75rpx;
  top: 70%;
  z-index: 999;
  margin: auto;
  padding: 20rpx;
  width: 600rpx;
  font-size: 30rpx;
  height: 70rpx;
  text-align: center;
  box-shadow: 10rpx 10rpx 10rpx #a5a5a5;
  line-height: 100%;
  color: #6a7b85;
  background-color: #fff;
  border: 3rpx solid #84adfb;
  border-radius: 20rpx;
}
.talk {
	position: relative;
  background-color: #fff;
  padding: 20rpx;
  color: #525252;
}
.talk .talk-header {
  height: 110rpx;
  display: flex;
}
.talk .talk-header .header-l {
  width: 100rpx;
  height: 100rpx;
  border-radius: 40rpx;
  overflow: hidden;
  border: 1rpx solid #84aefbad;
}
.talk .talk-header .header-l image {
  width: 100%;
}
.talk .talk-header .header-m {
  margin-left: 20rpx;
  flex: 4;
}
.talk .talk-header .header-m .nick-name {
  font-size: 40rpx;
}
.talk .talk-header .header-r {
  flex: 1;
}
.talk .talk-header .header-r .iconfont {
  font-size: 85rpx;
}
.talk .item-price {
  line-height: 45rpx;
  margin: 35rpx 25rpx 30rpx 0;
  font-size: 45rpx;
  color: #c84746;
}
.talk .item-price .item-price-num {
  margin-right: 30rpx;
}
.talk .item-price .item-price-tag {
  line-height: 45rpx;
}
.talk .talk-content {
  font-size: 35rpx;
  padding: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.talk .item-info {
  font-size: 24rpx;
}
.talk .item-info .info-tag {
  margin-right: 30rpx;
}
.talk .item-info .item-info-contact {
  margin-top: 50rpx;
}
.talk .talk-main .talk-imgs {
  display: flex;
  flex-wrap: wrap;
  width: 660rpx;
  margin: auto;
  margin-bottom: 20rpx;
  height: auto;
}
.talk .talk-main .talk-imgs .talk-img1 {
  width: 660rpx;
}
.talk .talk-main .talk-imgs .talk-img2 {
  min-width: 330rpx;
  min-height: 330rpx;
  overflow: hidden;
}
.talk .talk-main .talk-imgs .talk-img3 {
  min-width: 220rpx;
  min-height: 220rpx;
  overflow: hidden;
}
.talk .talk-main .talk-imgs image {
  width: 100%;
  height: 100%;
  padding: 3rpx;
}
.talk .talk-dis {
  margin-top: 50rpx;
}
.talk .dis-input {
  background-color: #fff;
  width: 100%;
}
.talk .dis-input .my-bottom-input {
 border-radius: 20rpx;
 border: 2rpx solid #39b54a;
 box-shadow: 10rpx 10rpx 10rpx #39b54a2d;
 position: fixed;
 bottom: 5rpx;
 z-index: 999;
}
.talk-dis .discuss {
  margin-top: 20rpx;
  border-top: 2rpx solid #e2e2e2;
  margin-bottom: 150rpx;
}
.talk-dis .discuss .dis-item {
  margin-top: 20rpx;
  margin-left: 10rpx;
}
.talk-dis .discuss .dis-item .dis-message {
  display: flex;
}
.talk-dis .discuss .dis-item .dis-message .dis-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  overflow: hidden;
}
.talk-dis .discuss .dis-item .dis-message .dis-avatar image {
  width: 100%;
  height: 100%;
}
.talk-dis .discuss .dis-item .dis-message .dis-msg-text {
  height: 90rpx;
  padding: 10rpx;
  margin-left: 25rpx;
}
.talk-dis .discuss .dis-item .dis-message .dis-msg-text .dis-nickname {
  font-weight: 600;
  font-size: 35rpx;
}
.talk-dis .discuss .dis-item .dis-main {
  display: flex;
}
.talk-dis .discuss .dis-item .dis-main .null {
  width: 90rpx;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content {
  width: 100%;
  border-bottom: 2rpx solid #e2e2e2;
  margin-left: 25rpx;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-image {
  max-width: 300rpx;
  padding-left: 20rpx;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-image image {
  width: 100%;
  height: 100%;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-content {
  padding: 20rpx;
  font-size: 35rpx;
  color: #615f5f;
  word-break: break-all;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-reply {
  padding: 20rpx 20rpx;
  background-color: #f7f7f7;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-reply .reply-main .reply-main-item {
  display: flex;
  line-height: 100%;
  margin: 10rpx;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-reply .reply-main .reply-main-item .reply-nickname {
  flex: 1;
  width: 120rpx;
  min-width: 120rpx;
  font-weight: 600;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-reply .reply-main .reply-main-item .reply-content {
  flex: 5;
  width: 100%;
  padding: 0 5rpx;
  word-break: break-all;
}
.talk-dis .discuss .dis-item .dis-main .dis-main-content .dis-reply .reply-main .reply-main-item .reply-content .reply-image-click {
  padding-left: 30rpx;
}

</style>
